<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          <el-row :gutter="30">
            <el-col :span="7">
              <el-input placeholder="客户姓名" v-model="condition.customerName" clearable @clear="query" size="large">
                <template #append>
                  <el-button type="info" @click="query" style="color:black">查询</el-button>
                </template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-divider style="margin:0"></el-divider>
      <el-main>
        <div>
          <!-- 表格 -->
          <el-table :data="khxxList" style="width: 100% ;color:black;" stripe>
            <el-table-column align="center" fixed type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column align="center" fixed prop="customerName" label="客户姓名" width="120" />
            <el-table-column align="center" prop="customerAge" label="年龄" width="120" />
            <el-table-column align="center" prop="customerSex" label="性别" width="120">
              <template #default="scope">{{ scope.row.customerSex == 0 ? '男' : '女' }}</template>
            </el-table-column>
            <el-table-column align="center" prop="roomNo" label="房间号" width="120" />
            <el-table-column align="center" prop="bedNo" label="床号" width="120" />
            <el-table-column align="center" prop="buildingNo" label="所属楼房" width="120" />
            <el-table-column align="center" prop="contactTel" label="联系电话" width="150" />
            <el-table-column align="center" prop="levelName" label="护理级别" width="120" />
            <el-table-column align="center" label="操作" width="180">
              <template #default="scope">
                <el-button type="success" color="#337ab7" icon="Odometer" size="small"
                  @click="opensetting(scope.row)">日常护理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页插件 -->
        <div style="margin-top:15px">
          <!-- 
              page-size:每页显示条目个数
              current-page:页码 配合@current-change使用
              disabled:是否禁用分页 
              background:是否为分页按钮添加背景色
              layout:组件布局，子组件名用逗号分隔
              total:总条目数

          -->
          <el-pagination :page-size="page.pageSize" background :current-page="page.currentPag"
            layout=" prev, pager, next" :total="page.total" @current-change="handleCurrentChange" />
        </div>
        <!-- 护理级别设置抽屉 -->
        <el-drawer title="客户护理项目" :before-close="handleClose" v-model="drawer.openFlag" direction="rtl" size="70%">
          <!-- <el-container>
          <el-header></el-header>-->
          <el-divider style="margin:0"></el-divider>
          <el-main>
            <!-- 表格 -->
            <el-table :data="customerItemList" size="small">
              <el-table-column align="center" :index="indexMethodItem" type="index" label="序号" width="60" />
              <el-table-column align="center" prop="customerName" label="客户" width="100" />
              <el-table-column align="center" prop="serialNumber" label="编号" width="100" />
              <el-table-column align="center" prop="nursingName" label="名称" width="100" />
              <el-table-column align="center" prop="servicePrice" label="价格" width="100" />
              <el-table-column align="center" prop="nurseNumber" label="余量" width="100" />
              <el-table-column align="center" prop="maturityTime" label="服务到期日期" width="120" />
              <el-table-column align="center" prop label="状态" width="180">
                <template #default="scope">
                  <el-tag v-if="0 < scope.row.nurseNumber && scope.row.nurseNumber < 10" type="warning"
                    disable-transitions>即将用完</el-tag>
                  <el-tag v-if="10 < scope.row.nurseNumber" type="success" disable-transitions>数量正常</el-tag>
                  <el-tag v-if="scope.row.nurseNumber < 0" type="danger" disable-transitions>已欠费</el-tag>
                  <el-tag v-if="(new Date(scope.row.maturityTime) - new Date()) / 86400000 > 10" type="success"
                    disable-transitions>未到期</el-tag>
                  <el-tag
                    v-if="(new Date(scope.row.maturityTime) - new Date()) / 86400000 > 0 && (new Date(scope.row.maturityTime) - new Date()) / 86400000 < 10"
                    type="warning" disable-transitions>即将到期</el-tag>
                  <el-tag v-if="(new Date(scope.row.maturityTime) - new Date()) / 86400000 < 0" type="danger"
                    disable-transitions>已到期</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="140">
                <template #default="scope">
                  <el-button type="primary" size="small" round plain @click="nurse(scope.row)">护理</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页插件 -->
            <div style="margin-top:15px" v-if="customerItemList.length > 0">
              <el-pagination :page-size="pageItem.pageSize" background :current-page="pageItem.currentPag"
                layout=" prev, pager, next" :total="pageItem.total" @current-change="handleItemChange" />
            </div>
          </el-main>
          <!-- 内嵌抽屉 ：添加护理记录-->
          <div>
            <el-drawer v-model="innerDrawer.openFlag" title="添加护理记录" :append-to-body="true"
              :before-close="handleInnerClose" size="35%">
              <el-divider border-style="double" style="margin:0;" />
              <el-form label-position="right" label-width="auto" style="max-width:380px;margin:20px auto"
                class="demo-form-inline" ref="nurseFormRef" :model="innerDrawer.nurseForm" :rules="innerDrawer.rules">
                <el-form-item label="客户姓名：" prop="customerName">
                  <el-input readonly v-model="innerDrawer.nurseForm.customerName" />
                </el-form-item>
                <el-form-item label="护理项目编号：" prop="serialNumber">
                  <el-input readonly v-model="innerDrawer.nurseForm.serialNumber" />
                </el-form-item>
                <el-form-item label="护理项目：" prop="itemName">
                  <el-input readonly v-model="innerDrawer.nurseForm.itemName" />
                </el-form-item>
                <el-form-item label="护理时间：" prop="nursingTime">
                  <el-date-picker style="width:300px" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    v-model="innerDrawer.nurseForm.nursingTime" type="datetime" placeholder="选择护理时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="护理数量：" prop="nursingCount">
                  <el-input v-model="innerDrawer.nurseForm.nursingCount" />
                </el-form-item>
                <el-form-item label="护理内容：" prop="nursingContent">
                  <el-input type="textarea" v-model="innerDrawer.nurseForm.nursingContent"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="save">立即创建</el-button>
                  <el-button @click="cancel">取消</el-button>
                </el-form-item>
              </el-form>
              <el-divider border-style="double" style="margin:0;" />
            </el-drawer>
          </div>
        </el-drawer>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Odometer } from '@element-plus/icons-vue';
import { getKhxxList } from '@/api/customerApi.js';
import { listCustomerItem } from '@/api/customerNurseItem.js';
import { getSessionStorage } from '@/utils/common.js';
import { addNurseRecord } from '@/api/nurseRecord.js';

// 表单引用
const nurseFormRef = ref(null);

// 响应式状态
const khxxList = ref([]); // 客户信息列表
const customerItemList = ref([]); // 客户护理项目列表
const user = getSessionStorage("user");

// 抽屉数据
const drawer = reactive({
  openFlag: false
});

// 添加护理记录抽屉数据
const innerDrawer = reactive({
  openFlag: false,
  nurseForm: {
    customerId: "",
    itemId: "",
    nursingContent: "",
    nursingCount: 1,
    nursingTime: "",
    userId: getSessionStorage("user").id,
    customerName: "",
    itemName: "",
    serialNumber: ""
  },
  // 校验规则
  rules: {
    nursingCount: [
      { required: true, message: "请输入护理数量", trigger: "blur" }
    ],
    nursingTime: [
      {
        type: "date",
        required: true,
        message: "请选择护理时间",
        trigger: "change"
      }
    ]
  }
});

// 分页属性 - 客户护理项目
const pageItem = reactive({
  total: 0,
  pageSize: 6,
  currentPag: 1,
  pagCount: 0
});

// 查询条件 - 客户护理项目
const conditionItem = reactive({
  customerId: "", // 客户编号
  pageSize: "1" // 默认第一页
});

// 查询条件 - 客户列表
const condition = reactive({
  userId: getSessionStorage("user").id,
  customerName: "",
  pageSize: "1" // 默认第一页
});

// 分页属性封装 - 客户列表
const page = reactive({
  total: 0,
  pageSize: 6,
  currentPag: 1,
  pagCount: 0
});

// 计算属性 - 序号计算
const indexMethod = computed(() => {
  return page.currentPag * page.pageSize - page.pageSize + 1;
});

// 计算属性 - 分页序号不重修 - 护理项目
const indexMethodItem = computed(() => {
  return pageItem.currentPag * pageItem.pageSize - pageItem.pageSize + 1;
});

// 页面加载时初始化
onMounted(() => {
  getKhxxListData();
});

// 点击查询按钮
const query = () => {
  condition.pageSize = "1"; // 回到第一页
  getKhxxListData();
};

// 选中页码 - 客户信息列表
const handleCurrentChange = (curPage) => {
  page.currentPag = curPage;
  condition.pageSize = curPage; // 参数pageSize是服务端接收页码参数名
  // 重新渲染表格
  getKhxxListData();
};

// 选中页码 - 客户护理项目
const handleItemChange = (curPage) => {
  pageItem.currentPag = curPage;
  conditionItem.pageSize = curPage;
  // 重新渲染表格
  listCustomerItemData();
};

// 打开抽屉
const opensetting = (row) => {
  drawer.openFlag = true;
  // 设置当前用户
  conditionItem.customerId = row.id;
  listCustomerItemData();
};

// 关闭抽屉
const handleClose = () => {
  drawer.openFlag = false;
  // 初始化数据
  conditionItem.customerId = "";
  conditionItem.pageSize = "1";
  customerItemList.value = [];
};

// 关闭抽屉 - 内层
const handleInnerClose = () => {
  innerDrawer.openFlag = false;
  // 重置参数
  resetParams();
};

// 重置表单和参数
const resetParams = () => {
  innerDrawer.nurseForm.customerId = "";
  innerDrawer.nurseForm.itemId = "";
  innerDrawer.nurseForm.customerName = "";
  innerDrawer.nurseForm.itemName = "";
  innerDrawer.nurseForm.nursingContent = "";
  innerDrawer.nurseForm.nursingCount = 1;
  innerDrawer.nurseForm.nursingTime = "";
  innerDrawer.nurseForm.serialNumber = "";
};

// 点击取消
const cancel = () => {
  handleInnerClose();
};

// 点击护理 - 打开内层抽屉
const nurse = (row) => {
  innerDrawer.openFlag = true;
  // 构建参数数据
  nextTick(() => {
    innerDrawer.nurseForm.customerId = row.custormerId;
    innerDrawer.nurseForm.itemId = row.itemid;
    innerDrawer.nurseForm.customerName = row.customerName;
    innerDrawer.nurseForm.itemName = row.nursingName;
    innerDrawer.nurseForm.serialNumber = row.serialNumber;
  });
};

// 保存护理记录
const save = () => {
  nurseFormRef.value.validate(valid => {
    if (valid) {
      ElMessageBox.confirm("确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          addNurseRecord(innerDrawer.nurseForm).then(res => {
            if (res.flag) {
              ElMessage.success(res.message);
              // 重载客户护理项目列表
              listCustomerItemData();
              // 关闭抽屉
              handleInnerClose();
            } else {
              ElMessage.error("添加记录失败");
            }
          });
        })
        .catch(() => { });
    } else {
      return false;
    }
  });
};

// 查询客户护理项目 - 分页
const listCustomerItemData = () => {
  listCustomerItem(conditionItem).then(res => {
    customerItemList.value = res.data.records;
    pageItem.total = res.data.total; // 总记录数
    pageItem.pageSize = res.data.size; // 每页显示条数
    pageItem.currentPag = res.data.current; // 当前页码
    pageItem.pagCount = res.data.pages; // 总页数
  });
};

// 查询客户信息列表 - 分页
const getKhxxListData = () => {
  getKhxxList(condition).then(res => {
    khxxList.value = res.data.records;
    page.total = res.data.total; // 总记录数
    page.pageSize = res.data.size; // 每页显示条数
    page.currentPag = res.data.current; // 当前页码
    page.pagCount = res.data.pages; // 总页数
  });
};
</script>

<style scoped></style>